<template>
  <div class="login">
    <div class="form">
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 15px;
        "
      >
        <img
          style="
            width: 50px;
            height: 50px;
            margin-right: 8px;
            border-radius: 50%;
          "
          src="../assets/image//jsDoctor.jpg"
        />
        <h2>京山市人民医院</h2>
      </div>
      <!--    <div style="
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 25px;
        ">
        <img style="
            width: 200px;
            height: auto;
            margin-right: 8px;
          " src="../assets/image/qmCare.png" />
      </div> -->

      <!--   <h3 class="title">医疗服务管理平台</h3> -->
      <el-tabs
        :stretch="true"
        type="card"
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane label="管理员" name="user">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="0"
            size="medium"
          >
            <el-form-item prop="username">
              <el-input
                v-model.trim="ruleForm.username"
                autocomplete="off"
                placeholder="请输入管理员账号"
                @keyup.enter.native="submit('ruleForm')"
              >
                <i slot="prefix" class="el-input__icon el-icon-user"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model.trim="ruleForm.password"
                autocomplete="off"
                placeholder="请输入管理员密码"
                @keyup.enter.native="submit('ruleForm')"
              >
                <i slot="prefix" class="el-input__icon el-icon-lock"></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="submit"
                type="primary"
                @click="submit('ruleForm')"
                :loading="loading"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="医生" name="doctor">
          <el-form
            :model="ruleFormDoc"
            :rules="rules"
            ref="ruleFormDoc"
            label-width="0"
            size="medium"
          >
            <el-form-item prop="usernameDoc">
              <el-input
                v-model.trim="ruleFormDoc.usernameDoc"
                autocomplete="off"
                placeholder="请输入医生账号"
                @keyup.enter.native="submit('ruleForm')"
              >
                <i slot="prefix" class="el-input__icon el-icon-user"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="passwordDoc">
              <el-input
                type="password"
                v-model.trim="ruleFormDoc.passwordDoc"
                autocomplete="off"
                placeholder="请输入医生密码"
                @keyup.enter.native="submit('ruleFormDoc')"
              >
                <i slot="prefix" class="el-input__icon el-icon-lock"></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="submit"
                type="primary"
                @click="loginDoctor('ruleFormDoc')"
                :loading="loading"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import { APilogin, ApiLoginDoctor } from "@a";
import { debounce } from "@u/index";
import { mapMutations } from "vuex";
import { initDynamicRoutes } from "@/router/index";
import { permissionFn } from "@u/directives";
export default {
  name: "Login",
  data() {
    return {
      activeName: "user",
      loading: false,
      ruleForm: {
        username: "",
        password: "",
      },
      ruleFormDoc: {
        passwordDoc: "",
        usernameDoc: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入账号",
            trigger: ["blur", "change"],
          },
        ],
        usernameDoc: [
          {
            required: true,
            message: "请输入账号",
            trigger: ["blur", "change"],
          },
        ],
        passwordDoc: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur", "change"],
          },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur", "change"],
          },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},

  methods: {
    ...mapMutations(["setUser"]),
    handleClick() {},
    submit: debounce(
      function () {
        if (this.activeName == "user") {
          this.$refs["ruleForm"].validate((valid) => {
            if (valid) {
              this.login();
            } else {
              return false;
            }
          });
        } else {
          this.$refs["ruleFormDoc"].validate((valid) => {
            if (valid) {
              this.loginDoctor();
            } else {
              return false;
            }
          });
        }
      },
      300,
      true
    ),

    login() {
      sessionStorage.setItem("loginType", "user");
      this.loading = true;
      let params = {
        username: this.ruleForm.username,
        password: this.ruleForm.password,
      };
      APilogin(params)
        .then((res) => {
          this.setUser(res.data);
          const path = initDynamicRoutes();
          permissionFn();
          this.$router.push(path);
          //this.$router.push("/departmentData/departmentManagement/index");
        })
        .finally((_) => {
          this.loading = false;
        });
    },

    //医生端登录
    loginDoctor() {
      sessionStorage.setItem("loginType", "doctor");
      this.loading = true;
      let params = {
        username: this.ruleFormDoc.usernameDoc,
        password: this.ruleFormDoc.passwordDoc,
      };
      ApiLoginDoctor(params)
        .then((res) => {
          let docMenu = [
            {
              title: "订单管理",
              route: "orderList",
              navigation: 1,
              sub_menus: [
                {
                  title: "订单列表",
                  route: "/orderList/index",
                  navigation: 1,
                },
              ],
            },

            /*     {
              title: "药品管理",
              route: "drugList",
              navigation: 1,
              sub_menus: [
                {
                  title: "药房发药",
                  route: "/drugList/index",
                  navigation: 1,
                },
                {
                  title: "药房配送",
                  route: "/drugDistribution/index",
                  navigation: 1,
                },
              ],
            }, */
            {
              title: "常用语管理",
              route: "commonExpressions",
              navigation: 1,
              sub_menus: [
                {
                  title: "常用语",
                  route: "/commonExpressions/index",
                  navigation: 1,
                },
              ],
            },
          ];
          if (res.data.user.type == "药师") {
            docMenu.splice(1, 0, {
              title: "处方管理",
              route: "prescriptionList",
              navigation: 1,
              sub_menus: [
                {
                  title: "处方列表",
                  route: "/prescriptionList/index",
                  navigation: 1,
                },
                {
                  title: "处方审核",
                  route: "/prescriptionReview/index",
                  navigation: 1,
                },
              ],
            });
          } else {
            docMenu.splice(1, 0, {
              title: "处方管理",
              route: "prescriptionList",
              navigation: 1,
              sub_menus: [
                {
                  title: "处方列表",
                  route: "/prescriptionList/index",
                  navigation: 1,
                },
                {
                  title: "处方模板",
                  route: "/prescriptionTemplate/index",
                  navigation: 1,
                },
              ],
            });
          }
          res.data.user.menu = docMenu;
          console.log(res.data);
          this.setUser(res.data);
          const path = initDynamicRoutes();
          this.$router.push(path);
        })
        .finally((_) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  display: flex;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: auto;
  background: url("../assets/image/login-bg.jpg") no-repeat center right;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  align-items: center;
  .form {
    flex: none;
    width: 320px;
    padding: 60px;
    margin: 0 auto;
    border-radius: 4px;
    /*    background-color: #e1e9ef; */
    border: 1px solid #e5e5e5; /* 设置背景颜色 */
    box-shadow: inset 10px 10px 10px rgba(0, 0, 0, 0.05),
      25px 35px 20px rgba(0, 0, 0, 0.05), 25px 30px 30px rgba(0, 0, 0, 0.05),
      inset -20px -20px 25px rgba(255, 255, 255, 0.9);
    border-radius: 25px;
    .title {
      margin-top: 0;
      margin-bottom: 10px;
      text-align: center;
      // color: #ffffff;
    }
    .submit {
      margin-top: 30px;
      width: 100%;
    }
  }
}
</style>
